import React, { useState } from "react";
import { Button, Col, Form, Input, Layout, message, Modal, Popconfirm, Row, Table } from "antd";
import styles from './index.module.less'
import { useAppSelector, useAppDispatch } from "@/hooks/redux.hooks";
import { deleteList, setList, editCell } from "@/store/modules/counterSlice"
const useRedux = (props) => {
    const { list }: any = useAppSelector(state => state.counter.counter);
    const dispatch = useAppDispatch()
    const confirm = (id) => {
        const index = list.findIndex(item => item.id === id)
        dispatch(deleteList(index))
        message.success('删除成功！');
    };
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '地区',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '操作',
            key: 'action',
            render: (record) => (
                <>
                    <Button type={'text'} onClick={() => editPage(record)}>
                        {'编辑'}
                    </Button>
                    <Popconfirm
                        title="确定要删除这条数据吗？"
                        okText="删除"
                        cancelText="取消"
                        onConfirm={() => confirm(record.id)}
                    >
                        <Button type={'link'} style={{ color: 'red' }}>
                            {'删除'}
                        </Button>
                    </Popconfirm>
                </>


            ),
        },
    ]
    const [open, setOpen] = useState(false)
    const [form] = Form.useForm()
    const editPage = (record) => {
            setOpen(true)
            const { id, name, age, address } = record
            if (id) {
                form.setFieldsValue({ id, name, age, address })
            }
    }
    const handleOk = () => {
        const { id, name, age, address } = form.getFieldsValue()
        setOpen(false)
        if (id) {
            // console.log('编辑');
            const index = list.findIndex(item => item.id === id)
            dispatch(editCell({ index, id, name, age, address }))
        } else {
            // console.log('新增');
            dispatch(setList([...list, { id: list.length + 1, name, age, address }]))
        }
    }
    return (
        <Layout className={styles.useRedux}>
            <Row gutter={[10, 50]}>
                <Col span={24}>
                    <Button onClick={() => {
                        setOpen(true)
                        form.resetFields()
                    }}>
                        {'新增'}
                    </Button>
                    <Table
                        className={styles.useRedux__table}
                        columns={columns}
                        dataSource={list}
                        pagination={false}
                        bordered
                    />
                </Col>
            </Row>
            <Modal open={open} closeIcon={false} onOk={handleOk} onCancel={() => setOpen(false)}>
                <Form form={form}>
                    <div className={styles.useRedux__head}>{'查看/编辑'}</div>
                    <Form.Item name="id">
                        <Input disabled type='hidden' />
                    </Form.Item>
                    <Form.Item label="姓名" name="name">
                        <Input placeholder="请输入姓名" />
                    </Form.Item>
                    <Form.Item label="年龄" name="age">
                        <Input placeholder="请输入年龄" />
                    </Form.Item>
                    <Form.Item label="地区" name="address">
                        <Input placeholder="请输入地区" />
                    </Form.Item>
                </Form>
            </Modal>
        </Layout>
    )
}

export default useRedux;